import { prisma } from "@/db";
import { redirect } from "next/navigation";
import Link from "next/link";
import TodoItem from "@/components/TodoItem";

async function createTodo(data: FormData) {
  "use server";

  const title = data.get("title")?.valueOf();
  if (typeof title != "string" || title.length === 0) {
    throw new Error("Invalid Title");
  }

  await prisma.todo.create({ data: { title, complete: false } });
  // redirect("/tdList");
}
async function removeTodo(id:string) {
console.log('id', id)
}


export default async function page() {
  const todos = await prisma.todo.findMany();
  return (
    <>
      <header className="flex justify-between items-center mb-4 w-[50%]">
        <h1 className="text-2xl">New</h1>
      </header>
      <form action={createTodo} className="flex gap-2 flex-col  w-[50%]">
        <input
          type="text"
          name="title"
          className="border border-slate-300 bg-transparent rounded px-2 py-1
          outline-none focus-within:border-slate-100"
        ></input>

        <div className="flex gap-1 justify-end">
          <Link
            href="./tdList"
            className="border border-slate-300 text-slate-300 px-2 py-1 rounde
            hover:bg-slate-700 focus-within:bg-slate-700 outline-none"
          >
            Cancel
          </Link>
          <button
            type="submit"
            className="border border-slate-300 text-slate-300 px-2 py-1 rounde
            hover:bg-slate-700 focus-within:bg-slate-700 outline-none"
          >
            Create
          </button>
        </div>
      </form>
      <ul className="pl-4">
        {todos.map((todo) => (
          <div key={todo.id} className="flex">
            <li> {todo.title} </li>
            <button     className="text-red-400 hover:text-red-600"> 删除</button>
          </div>
        ))}
      </ul>
    </>
  );
}
